import React, { memo } from 'react';
import { Card, Row, Col } from 'antd';
import { useSelector } from 'react-redux'; // 使用 Redux 状态
import styles from './style.module.less';

const ParamsConfig = () => {
  const paramsData = useSelector((state) => state.params.paramsData); // 从 Redux 获取数据

  return (
    <div className={styles.dataListContainer}>
      <div className={styles.gridContainer}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Card className={styles.card}>
              <div className={styles.paramTitle}>罩压力</div>
              <div className={styles.paramValue}>
                {paramsData["罩压力"] !== undefined ? `${paramsData["罩压力"].toFixed(2)} Pa` : '尚未预测'}
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className={styles.card}>
              <div className={styles.paramTitle}>热风风速</div>
              <div className={styles.paramValue}>
                {paramsData["热风风速"] !== undefined ? `${paramsData["热风风速"].toFixed(2)} m/s` : '尚未预测'}
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className={styles.card}>
              <div className={styles.paramTitle}>滚筒温度</div>
              <div className={styles.paramValue}>
                {paramsData["滚筒温度"] !== undefined ? `${paramsData["滚筒温度"].toFixed(2)} ℃` : '尚未预测'}
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className={styles.card}>
              <div className={styles.paramTitle}>脱水量</div>
              <div className={styles.paramValue}>
                {paramsData["脱水量"] !== undefined ? `${paramsData["脱水量"].toFixed(2)} kg` : '尚未预测'}
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export const MemoParamsConfig = memo(ParamsConfig);
